import React, { useEffect, useState } from 'react';

// class Toggle extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       isToggleOn: true
//     }
//   }

//   handleClick () {
//     this.setState(state => ({
//       isToggleOn: !state.isToggleOn
//     }))
//   }

//   render() {
//     return (
//       <button onClick={ () => this.handleClick() }>
//         { this.state.isToggleOn ? 'ON' : 'OFF' }
//       </button>
//     )
//   }
// }

function Toggle() {

  const [isToggleOn, setIsToggleOn] = useState(true);

  useEffect(() => {
    document.title = `togglenOn is ${isToggleOn}`
  })

  return (
    <button onClick={ () => setIsToggleOn(!isToggleOn) }>
      { isToggleOn ? 'ON' : 'OFF' }
    </button>
  )
}

export default Toggle;